<template>
  <el-container id="system2">
    <el-header><h1>销售员管理系统</h1></el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu :router="true">
          <el-submenu
            v-for="item in menuData"
            :key="item.index"
            :index="item.index"
          >
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.text }}</span>
            </template>
            <el-menu-item
              v-for="sub in item.subMenu"
              :key="sub.index"
              :index="sub.index"
              >{{ sub.text }}</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
    data(){
        return {
            menuData:[
                {icon:'el-icon-s-custom',index:'1', text: '保险订单管理', subMenu:[
                    {index: '/salesmansSystem/salesmansOrderList', text: '我负责的订单'},
                ]},
                {icon:'el-icon-bell',index:'2', text: '客户管理', subMenu:[
                    {index: '/salesmansSystem/customersAdd', text: '新增客户'},
                    {index: '/salesmansSystem/MyCustomers',text: '我的客户'}
                ]},
               
            ]
        }
    },
    methods: {
    },
};
</script>

<style lang="scss">
body {
  margin: 0;
}
#system2 {
  min-height: 100vh;
  h1 {
    margin: 0;
  }
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  padding-left: 100px;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
.el-menu {
  width: 100%;
}
</style>